{% set base_images = 'http://media.yellowpages.co.th/yellowpages'%}
{% set base_promotion = 'http://promotion.yellowpages.co.th/media/promotion/' %}

<div class="container-fluid">
    <div class="col-xs-12 col-md-8 col-lg-8" >

        <div class="row">
            <div class="col-xs-12 col-md-12 col-lg-12">
                {#{% if profile.logo %}#}
                {#<div class="col-xs-12 col-md-5 col-lg-5">#}
                    {#<img class="img-responsive" src="{{ [base_images,"/logo/",profile.logo]|join }}"/>#}
                {#</div>#}
                {#{% else %}#}
                {#<div class="col-xs-12 col-md-3 col-lg-3">#}
                    {#<img class="img-responsive" src="{{ '/themes/bootstrap/typ/images/icon-map/typ-map-default.jpg' }}"/>#}
                {#</div>#}
                {#{% endif %}#}

                <div class="col-xs-12 col-md-7 col-lg-7" style="padding: 0px;">
                    <h4>{{ profile.humanname|raw }}</h4>
                    {% trans %}หมวดหมู{% endtrans %}่ : <a href="/heading/{{ profile.ypheadingname }}">{{ profile.headingname|raw }}</a><br>
                </div>
            </div>
        </div>

        <div class="row">
            <!-- check FL close openx -->
            {% if type != 'FL' %}
            <div id="customertype"
                 data-customertype="{{ type }}" style="display: none"></div>
            {% endif %}
            <!-- check FL close openx -->
            <br>
            <div class="col-xs-12 col-sm-12 col-lg-12">
                {% if type != 'FL' %}
                    {{ profile.profile|raw}}
                    {% else %}
                    {{ profile.profile|raw|slice(0, 100)}}{% if profile.profile|length > 100 %}{{ '...</p>' }}{% endif %}<br><br>
                {% endif %}
                {% trans %} Address {% endtrans %}
                {{ [profile.addr,profile.soi,profile.road,profile.subdistrictname,
                    profile.districtname,profile.cityname,profile.postcode]|join(' ') }}
                {#{% if profile.location.lat %}#}
                    {#<a href="/ypsearch?qm=#{{ profile.humanname|raw }}"><img src="/themes/bootstrap/typ/images/icon-map/icon-pin-map_r.png"></a> <br>#}
                {#{% else %}#}
                    {#<a href="https://www.google.co.th/maps/search/{{ profile.fulladdr|url_encode     }}" target="_blank"><img src="/themes/bootstrap/typ/images/icon-map/icon-pin-map_r.png"></a> <br>#}
                {#{% endif %}#}
                <br><br>

                <div class="row">
                    <div class="col-xs-4 col-sm-3 col-lg-3 ">
                        {% if not profile.telno %}{% else %}{% trans %} Tel {% endtrans %}{% if type == 'FL' %} {% set loop = 1 %}{% else %} {% set loop = profile._format.telno|length %}{% endif %}{% for i in 1..loop %} {{ '<br>' }}   {% endfor %}{% endif %}
                        {% if not profile.fax %}{% else %}{% trans %} Fax {% endtrans %}{% if type == 'FL' %} {% set loop = 1 %}{% else %} {% set loop = profile._format.fax|length %}{% endif %}{% for i in 1..loop  %} {{ '<br>' }} {% endfor %}{% endif %}
                        {% if not profile.email %}{% else %}{% trans %} Email {% endtrans %}  {% set loop =  profile.email|split(',') %}{% for i in 1..loop|length  %} {{ '<br>' }} {% endfor %}  {% endif %}
                        {% if not profile.websit %}{% else %}{% trans %} Website {% endtrans %} {% set loop =  profile.websit|split(',') %}{% for i in 1..loop|length  %} {{ '<br>' }} {% endfor %} {% endif %}
                        {% if not profile.workinghours %}{% else %}{% trans %} Work-Time {% endtrans %}{% endif %}
                    </div>
                    <div class="col-xs-8 col-sm-9 col-lg-9">
                        {% if not profile.telno %}
                            {% else %}
                                {% if type == 'FL' %}
                                    <span>{{ profile._format.telno.0 }}</span><br>
                                {% else %}
                                {% for key, tel in profile._format.telno %}
                                    {% if loop.last != key+1 %}<a href="tel:{{ tel }}">{{ tel }}</a>{{ " ,<br>" }}
                                    {% else %}<a href="tel:{{ tel }}">{{ tel }}</a>{% endif %}
                                {% endfor %}<br>
                                {% endif %}
                        {% endif %}

                        {% if not profile.fax %}
                        {% else %}
                            {% if type == 'FL' %}
                                <span>{{ profile._format.fax.0 }}</span><br>
                            {% else %}
                                {% for key, fax in profile._format.fax %}
                                    {% if loop.last != key+1 %}<a href="tel:{{ fax }}">{{ fax }}</a>{{ " ,<br>" }}
                                    {% else %}<a href="tel:{{ fax }}">{{ fax }}</a>{% endif %}
                                {% endfor %}<br>
                            {% endif %}
                        {% endif %}

                        {% if not profile.email %}
                        {% else %}
                            {% if type == 'FL' %}
                                {% set email =  profile.email|split(',') %}
                                {% for key , mail in email %}
                                    {% if loop.last != key+1 %}{{ mail }} ,<br>
                                    {% else %}{{ mail }}<br>{% endif %}
                                {% endfor %}
                            {% else %}
                                {% set email =  profile.email|split(',') %}
                                {% for key , mail in email %}
                                    {% if loop.last != key+1 %}<a href="mailto:{{ mail }}">{{ mail }}</a> ,<br>
                                    {% else %}<a href="mailto:{{ mail }}">{{ mail }}</a><br>{% endif %}
                                {% endfor %}
                            {% endif %}
                        {% endif %}

                        {% if not profile.websit %}
                            {% else %}
                            {% set website =  profile.websit|split(',') %}
                                {% for key , web in website %}
                                    {% if loop.last != key+1 %}<a href="http://{{ web }}" target="_blank">{{ web }}</a> ,<br>
                                    {% else %}<a href="http://{{ web }}" target="_blank">{{ web }}</a><br>{% endif %}
                                {% endfor %}
                        {% endif %}

                        {% if not profile.workinghours %}
                            {% else %}
                            {{ profile._format.workinghours }}<br>
                        {% endif %}
                    </div>



                    <div class="row" style="margin-left: 0px;">
                        <div class="col-xs-12 col-md-12 col-lg-12">
                            {% if type != 'FL' %}
                                {% if not prodescription %}
                                    {% else %}
                                        <br>{% trans %} Product And Service {% endtrans %}<br><br>
                                        {{ prodescription|raw }}<br>
                                {% endif %}

                                {% if not profile.brandname %}
                                    {% else %}<br>{% trans %} Banner {% endtrans %} : {{ profile.brandname|replace({"<p>":" ","</p>":" "}) }}
                                {% endif %}
                            {% endif %}

                            <br><br><br>
                            {# TAB #}
                            {% if type == 'FL' %}
                            <div class="mobile">
                            <ul class="nav nav-tabs" {% if not promotion.promotionid and not profile.map %}style="display: none;"{% endif %}>
                                {% if promotion.promotionid %}<li class="active" ><a data-toggle="tab" href="#menu3">{% trans %} Promotion  {% endtrans %}</a></li>{% endif %}
                                {% if profile.map %}<li {% if not promotion.promotionid %}{{ 'class="active"' }}{% endif %}><a data-toggle="tab" href="#menu4">{% trans %} Map Picture {% endtrans %}</a></li>{% endif %}
                            </ul>

                                <div class="tab-content" {% if not promotion.promotionid and not profile.map %}style="display: none;"{% endif %}>

                                    {% if promotion.promotionid %}
                                        <div id="menu3" {% if not promotion.promotionid %}{{ ' class="tab-pane fade"' }}{% else %}{{ ' class="tab-pane fade in active"' }}{% endif %}>
                                            <br>
                                            <div class="col-xs-12 col-md-12 col-lg-12">
                                                <div class="col-xs-6 col-md-6 col-lg-6 text-left">
                                                    {{ profile.humanname|raw }}
                                                    <br>
                                                    <b><span style="color:red">{% trans %}Promotion{% endtrans %} : </span> </b> {{ promotion.title }}
                                                </div>
                                                <div class="col-xs-6 col-md-6 col-lg-6 text-right">
                                                    <b>{% trans %}Start Date{% endtrans %} :</b> {{ promotion.startdate|raw }}
                                                    <br>
                                                    <b>{% trans %}End Date{% endtrans %} :</b> {{ promotion.enddate|raw }}
                                                </div>
                                            </div>

                                            <br><br><br>
                                            <div class="col-xs-12 col-md-12 col-lg-12 text-center">
                                                {% if promotion.promoimg %}
                                                    <div {% if promotion.promoimg and not promotion.promoimg2 and not promotion.promoimg3 %} class="col-xs-4 col-md-4 col-lg-4 col-xs-offset-4 col-md-offset-4 col-lg-offset-4"
                                                         {% elseif promotion.promoimg and promotion.promoimg2 and not promotion.promoimg3 %} class="col-xs-4 col-md-4 col-lg-4 col-xs-offset-4 col-md-offset-4 col-lg-offset-4"
                                                         {% else %} class="col-md-4" {% endif %} >
                                                        <a href="{{ base_promotion }}/{{ promotion.customerid }}/{{ promotion.promoimg }}" class="colorbox group1" title="{{ promotion.productimg }}"><img class="img-responsive" src="{{ base_promotion }}/{{ promotion.customerid }}/{{ promotion.promoimg }}" /></a>
                                                    </div>
                                                {% endif %}
                                                {% if promotion.promoimg2 %}
                                                <div class="col-md-4" >
                                                    <a href="{{ base_promotion }}/{{ promotion.customerid }}/{{ promotion.promoimg2 }}" class="colorbox group1" title="{{ promotion.productimg2 }}"><img class="img-responsive" src="{{ base_promotion }}/{{ promotion.customerid }}/{{ promotion.promoimg2 }}" /></a>
                                                </div>
                                                {% endif %}
                                                {% if promotion.promoimg3 %}
                                                    <div class="col-md-4" >
                                                        <a href="{{ base_promotion }}/{{ promotion.customerid }}/{{ promotion.promoimg3 }}" class="colorbox group1" title="{{ promotion.productimg3 }}"><img class="img-responsive" src="{{ base_promotion }}/{{ promotion.customerid }}/{{ promotion.promoimg3 }}" /></a>
                                                    </div>
                                                {% endif %}
                                            </div>
                                            <br><br><br><br><br><br>
                                            <div style="padding-left: 29px;padding-right: 27px;">
                                                <b>{% trans %}Detail{% endtrans %} : </b>
                                                {{ promotion.subject|raw }}
                                                <br><br>
                                            </div>
                                        </div>
                                    {% endif %}

                                    {% if profile.map %}
                                        <div id="menu4" {% if promotion.promotionid %}{{ ' class="tab-pane fade"' }}{% else %}{{ ' class="tab-pane fade in active"' }}{% endif %}>
                                            <div class="row">
                                                <div class="col-xs-12 col-sm-12 col-lg-12">
                                                    <br>
                                                    <a href="{{[base_images,"/map/th/",profile.map,".jpg"]|join}}" class="colorbox">
                                                        <img class="img-responsive " src="{{[base_images,"/map/th/",profile.map,".jpg"]|join}}"/>
                                                    </a>
                                                </div>
                                            </div>
                                        </div>
                                    {% endif %}

                                </div>
                            </div>
                            {% else %}
                            <div class="mobile">
                            <ul class="nav nav-tabs">
                                {#{% if profile.picturet1 %}<li class="active"><a data-toggle="tab" href="#home">{% trans %} Picture {% endtrans %}</a></li>{% endif %}#}
                                {% if promotion.promotionid %}<li class="active" ><a data-toggle="tab" href="#menu1">{% trans %} Promotion  {% endtrans %}</a></li>{% endif %}
                                {% if profile.location.lat %}<li {% if not promotion.promotionid %} {{ 'class="active"' }} {% endif %}><a data-toggle="tab" href="#menu2">{% trans %} Digital Map {% endtrans %}</a></li>{% endif %}
                                {% if profile.printadst %}<li {% if not promotion.promotionid and not profile.location.lat %}{{ 'class="active"' }}{% endif %}><a data-toggle="tab" href="#menu3">{% trans %} Advertisement {% endtrans %}</a></li>{% endif %}
                                {#{% if profile.map %}<li {% if not profile.location.lat and not profile.printadst and not profile.promotion and not profile.onlinepromotion %}{{ 'class="active"' }}{% endif %}><a data-toggle="tab" href="#menu4">{% trans %} Map Picture {% endtrans %}</a></li>{% endif %}#}
                            </ul>

                            <div class="tab-content">
                                {#{% if profile.picturet1 %}#}
                                {#<div id="home" class="tab-pane fade in active">#}
                                    {#<br>#}
                                    {#<div class="row">#}
                                        {#{% if profile.picturet1  %}#}
                                        {#<div class="col-xs-4 col-sm-4 col-lg-4">#}
                                            {#<a href="{{[base_images,"/products/th/",profile.customerid,"/",profile.picturet1]|join}}" class="colorbox">#}
                                                    {#<img class="img-responsive" src="{{[base_images,"/products/th/",profile.customerid,"/",profile.picturet1]|join}}"/>#}
                                            {#</a>#}
                                        {#</div>#}
                                        {#{% endif %}#}
                                        {#{% if profile.picturet2  %}#}
                                        {#<div class="col-xs-4 col-sm-4 col-lg-4">#}
                                            {#<a href="{{[base_images,"/products/th/",profile.customerid,"/",profile.picturet2]|join}}" class="colorbox">#}
                                                {#<img class="img-responsive" src="{{[base_images,"/products/th/",profile.customerid,"/",profile.picturet2]|join}}"/>#}
                                            {#</a>#}
                                        {#</div>#}
                                        {#{% endif %}#}
                                        {#{% if profile.picturet3  %}#}
                                        {#<div class="col-xs-4 col-sm-4 col-lg-4">#}
                                            {#<a href="{{[base_images,"/products/th/",profile.customerid,"/",profile.picturet3]|join}}" class="colorbox">#}
                                                {#<img class="img-responsive" src="{{[base_images,"/products/th/",profile.customerid,"/",profile.picturet3]|join}}"/>#}
                                            {#</a>#}
                                        {#</div>#}
                                        {#{% endif %}#}
                                        {#{% if profile.picturet4  %}#}
                                        {#<div class="col-xs-4 col-sm-4 col-lg-4">#}
                                            {#<a href="{{[base_images,"/products/th/",profile.customerid,"/",profile.picturet4]|join}}" class="colorbox">#}
                                                {#<img class="img-responsive" src="{{[base_images,"/products/th/",profile.customerid,"/",profile.picturet4]|join}}"/>#}
                                            {#</a>#}
                                        {#</div>#}
                                        {#{% endif %}#}
                                        {#{% if profile.picturet5  %}#}
                                        {#<div class="col-xs-4 col-sm-4 col-lg-4">#}
                                            {#<a href="{{[base_images,"/products/th/",profile.customerid,"/",profile.picturet5]|join}}" class="colorbox">#}
                                                {#<img class="img-responsive" src="{{[base_images,"/products/th/",profile.customerid,"/",profile.picturet5]|join}}"/>#}
                                            {#</a>#}
                                        {#</div>#}
                                        {#{% endif %}#}
                                        {#{% if profile.picturet6  %}#}
                                        {#<div class="col-xs-4 col-sm-4 col-lg-4">#}
                                            {#<a href="{{[base_images,"/products/th/",profile.customerid,"/",profile.picturet6]|join}}" class="colorbox">#}
                                                {#<img class="img-responsive" src="{{[base_images,"/products/th/",profile.customerid,"/",profile.picturet6]|join}}"/>#}
                                            {#</a>#}
                                        {#</div>#}
                                        {#{% endif %}#}
                                        {#{% if profile.picturet7  %}#}
                                        {#<div class="col-xs-4 col-sm-4 col-lg-4">#}
                                            {#<a href="{{[base_images,"/products/th/",profile.customerid,"/",profile.picturet7]|join}}" class="colorbox">#}
                                                {#<img class="img-responsive" src="{{[base_images,"/products/th/",profile.customerid,"/",profile.picturet7]|join}}"/>#}
                                            {#</a>#}
                                        {#</div>#}
                                        {#{% endif %}#}
                                        {#{% if profile.picturet8  %}#}
                                        {#<div class="col-xs-4 col-sm-4 col-lg-4">#}
                                            {#<a href="{{[base_images,"/products/th/",profile.customerid,"/",profile.picturet8]|join}}" class="colorbox">#}
                                                {#<img class="img-responsive" src="{{[base_images,"/products/th/",profile.customerid,"/",profile.picturet8]|join}}"/>#}
                                            {#</a>#}
                                        {#</div>#}
                                        {#{% endif %}#}
                                        {#{% if profile.picturet9  %}#}
                                        {#<div class="col-xs-4 col-sm-4 col-lg-4">#}
                                            {#<a href="{{[base_images,"/products/th/",profile.customerid,"/",profile.picturet9]|join}}" class="colorbox">#}
                                                {#<img class="img-responsive" src="{{[base_images,"/products/th/",profile.customerid,"/",profile.picturet9]|join}}"/>#}
                                            {#</a>#}
                                        {#</div>#}
                                        {#{% endif %}#}
                                    {#</div>#}
                                {#</div>#}
                                {#{% endif %}#}

                                {% if promotion.promotionid %}
                                    <div id="menu1" class="tab-pane fade in active" >
                                        <br>
                                        <div class="col-xs-12 col-md-12 col-lg-12">
                                            <div class="col-xs-6 col-md-6 col-lg-6 text-left">
                                                {{ profile.humanname|raw }}
                                                <br>
                                                <b><span style="color:red">{% trans %}Promotion{% endtrans %} : </span> </b> {{ promotion.title }}
                                            </div>
                                            <div class="col-xs-6 col-md-6 col-lg-6 text-right">
                                                <b>{% trans %}Start Date{% endtrans %} :</b> {{ promotion.startdate|raw }}
                                                <br>
                                                <b>{% trans %}End Date{% endtrans %} :</b> {{ promotion.enddate|raw }}
                                            </div>
                                        </div>

                                        <br><br><br>
                                        <div class="col-xs-12 col-md-12 col-lg-12 text-center">
                                            {% if promotion.promoimg %}
                                                <div {% if promotion.promoimg and not promotion.promoimg2 and not promotion.promoimg3 %} class="col-xs-4 col-md-4 col-lg-4 col-xs-offset-4 col-md-offset-4 col-lg-offset-4"
                                                {% elseif promotion.promoimg and promotion.promoimg2 and not promotion.promoimg3 %} class="col-xs-4 col-md-4 col-lg-4 col-xs-offset-4 col-md-offset-4 col-lg-offset-4"
                                                {% else %} class="col-md-4" {% endif %} >
                                                    <a href="{{ base_promotion }}/{{ promotion.customerid }}/{{ promotion.promoimg }}" class="colorbox group1" title="{{ promotion.productimg }}"><img class="img-responsive" src="{{ base_promotion }}/{{ promotion.customerid }}/{{ promotion.promoimg }}" /></a>
                                                </div>
                                            {% endif %}
                                            {% if promotion.promoimg2 %}
                                                <div class="col-md-4" >
                                                    <a href="{{ base_promotion }}/{{ promotion.customerid }}/{{ promotion.promoimg2 }}" class="colorbox group1" title="{{ promotion.productimg2 }}"><img class="img-responsive" src="{{ base_promotion }}/{{ promotion.customerid }}/{{ promotion.promoimg2 }}" /></a>
                                                </div>
                                            {% endif %}
                                            {% if promotion.promoimg3 %}
                                                <div class="col-md-4" >
                                                    <a href="{{ base_promotion }}/{{ promotion.customerid }}/{{ promotion.promoimg3 }}" class="colorbox group1" title="{{ promotion.productimg3 }}"><img class="img-responsive" src="{{ base_promotion }}/{{ promotion.customerid }}/{{ promotion.promoimg3 }}" /></a>
                                                </div>
                                            {% endif %}
                                        </div>
                                        <br><br><br><br><br><br>
                                        <div style="padding-left: 29px;padding-right: 27px;">
                                            <b>{% trans %}Detail{% endtrans %} : </b>
                                            {{ promotion.subject|raw }}
                                            <br><br>
                                        </div>
                                    </div>
                                {% endif %}

                                {% if profile.location.lat %}
                                <div id="menu2" {% if promotion.promotionid %} {{ 'class="tab-pane fade"' }} {% else %} {{ 'class="tab-pane fade in active"' }} {% endif %}  >
                                    <br>
                                    <iframe width="100%" height="240" scrolling="no" frameborder="0" src="http://landingpage.yellowpages.co.th/yp_map.php?latitude={{ profile.location.lat }}&amp;longitude={{ profile.location.lon }}&amp;height=240&amp;width=445" allowtransparency="true" marginwidth="0" marginheight="0"></iframe>
                                </div>
                                {% endif %}
                                
                                {% if profile.printadst %}
                                <div id="menu3" {% if promotion.promotionid or profile.location.lat %}{{ ' class="tab-pane fade"' }}{% else %}{{ ' class="tab-pane fade in active"' }}{% endif %}>
                                    <div class="row">
                                        <div class="col-xs-12 col-sm-12 col-lg-12">
                                            <br>
                                            <a href="{{[base_images,"/printads/th/",profile.printadst,".jpg"]|join}}" class="colorbox">
                                                <img class="img-responsive typ-profile-printads" src="{{[base_images,"/printads/th/",profile.printadst,".jpg"]|join}}"/>
                                            </a>
                                        </div>
                                    </div>
                                </div>
                                {% endif %}

                                {#{% if profile.map %}#}
                                    {#<div id="menu4" {% if profile.location.lat or profile.printadst or profile.promotion or profile.onlinepromotion %}{{ ' class="tab-pane fade"' }}{% else %}{{ ' class="tab-pane fade in active"' }}{% endif %}>#}
                                        {#<div class="row">#}
                                            {#<div class="col-xs-12 col-sm-12 col-lg-12">#}
                                                {#<br>#}
                                                {#<a href="{{[base_images,"/map/th/",profile.map,".jpg"]|join}}" class="colorbox">#}
                                                    {#<img class="img-responsive " src="{{[base_images,"/map/th/",profile.map,".jpg"]|join}}"/>#}
                                                {#</a>#}
                                            {#</div>#}
                                        {#</div>#}
                                    {#</div>#}
                                {#{% endif %}#}
                            </div>
                            </div>

                            {% endif %}

                            {#<br><br><br>#}
                            {#{% if not profile.custname %}#}
                                {#{% else %}#}
                                {#{{ profile.custname|raw }} : แสดงความคิดเห็น#}
                            {#{% endif %}#}
                            {#<br><br>#}

                            {# TAB #}
                            {#<div class="mobile">#}
                                {#<ul class="nav nav-tabs">#}
                                    {#<li class="active"><a data-toggle="tab" href="#menu">{% trans %} Comment {% endtrans %}</a></li>#}
                                    {#<li><a data-toggle="tab" href="#menu">{% trans %} Picture Concerned {% endtrans %}</a></li>#}
                                    {#&#123;&#35;<li><a data-toggle="tab" href="#menu6">{% trans %} Advertise {% endtrans %}</a></li>&#35;&#125;#}
                                {#</ul>#}

                                {#<div class="tab-content">#}
                                    {#<div id="menu4" class="tab-pane fade in active">#}
                                        {#<h3>HOME</h3>#}
                                        {#<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>#}
                                    {#</div>#}
                                    {#<div id="menu5" class="tab-pane fade">#}
                                        {#<h3>Menu 1</h3>#}
                                        {#<p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>#}
                                    {#</div>#}
                                    {#&#123;&#35;<div id="menu6" class="tab-pane fade">&#35;&#125;#}
                                        {#&#123;&#35;<h3>Menu 2</h3>&#35;&#125;#}
                                        {#&#123;&#35;<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam.</p>&#35;&#125;#}
                                    {#&#123;&#35;</div>&#35;&#125;#}
                                {#</div>#}
                            {#</div>#}
                            {# END TAB #}
                            <br><br>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="col-xs-12 col-md-4 col-lg-4">
        <div class="col-xs-12 col-md-12 col-lg-12">

        </div>
    </div>
</div>